<template>
	<view style="padding: 20px;">
		<view class="uni-common-mt" style="">
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="padding: 10px;" class="uni-input" value="姓名" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input style="padding: 10px;color: gray" class="uni-input" v-model="username"
						placeholder="请输入账号" />
				</view>
			</view>
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="padding: 10px;" class="uni-input" value="所在小区" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input style="padding: 10px;color: gray" class="uni-input" @click="selectCoumnuity" v-model="community"
						disabled="true" />
				</view>
			</view>
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="padding: 10px;" class="uni-input" value="详细住址" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input style="padding: 10px;color: gray" class="uni-input" v-model="address" placeholder="填写详细地址" />
				</view>
			</view>
			<!-- <view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<input style="margin: 10px;" class="uni-input" value="身份证" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input style="padding: 10px;color: gray" class="uni-input" v-model="id_number"
						placeholder="请输入身份证" />
				</view>
			</view> -->
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;padding: 20px 10px;">
				<view style="flex: 1;margin-right: 10px;">
					<image @click="selectIdcardFront" :src="idcard_front" style="width: 100%;height: 100px;"></image>
					<view style="text-align: center;color: gray;font-size: 12px;">上传身份证头像页</view>
				</view>
				<view style="flex: 1;">
					<image @click="selectIdcardBack" :src="idcard_back" style="width: 100%;height: 100px;"></image>
					<view style="text-align: center;color: gray;font-size: 12px;">上传身份证国徽页</view>
				</view>
			</view>
			<view class="uni-form-item uni-column" style="display: flex;bapadding: 20px 10px; background-color: #F8F8F8">
				<view style="flex: 1;">
					<image @click="selectEstate" :src="estate" style="width: 100%;height: 160px;"></image>
					
				</view>
			</view>
			
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="padding: 10px;" class="uni-input" value="手机号" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input type="number" style="padding: 10px;color: gray" class="uni-input" v-model="mobile_number"
						placeholder="请输入手机号" />
				</view>
			</view>
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<view style="flex: 2;line-height: 42px;"><input style="padding: 10px;" class="uni-input" value="验证码" disabled="true" /></view>
				<view style="flex: 6;text-align: right;">
					<input type="number" style="padding: 10px;color: gray" class="uni-input" v-model="code"
						placeholder="请输入验证码" />
				</view>
				<view style="flex: 3;text-align: right;">
					<button style="padding: 5px 10px;margin-top: 5px;" @click="sendCode" size="mini">发送短信</button>
				</view>
			</view>
			
			<uni-popup ref="popup" type="center" :animation="false">
				<uni-popup-dialog mode="input" message="请选择" :duration="2000" :before-close="true" @close="close" @confirm="confirmCommunity">
					<view style="background-color: #fff;width: 100%;padding: 10px;">
						<radio-group @change="communityChange" style="">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in community_list" :key="item.value">
								<view style="margin-bottom: 10px;">
									<radio style="transform:scale(0.8)" :value="index+''" />
									<text>{{item}}</text>
								</view>
							</label>
						</radio-group>
					</view>
				</uni-popup-dialog>
			</uni-popup>
			
			<button style="margin-top: 40px;" type="primary" @click="postSignup">提交资料，立即注册</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				id_number: '',
				community: '请选择',
				address: '',
				community_id: 0,
				building_number_id: 0,
				unit_id: 0,
				house_id: 0,
				mobile_number: '',
				code: '',
				idcard_front: '../../static/just.png',
				idcard_back: '../../static/against.png',
				estate: '../../static/16.png',
				community_list: [
					
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			let that = this;
			this.$api.getCommunity().then(res => {
				that.community_list = res.data;
			})
		},
		methods: {
			close() {
				this.$refs.popup.close()
			},
			selectCoumnuity() {
				this.$refs.popup.open()
			},
			selectAddress() {
				
			},
			communityChange(e) {
				this.community_id = e.detail.value;
			},
			confirmCommunity() {
				this.community = this.community_list[this.community_id]
				this.$refs.popup.close()
			},
			image2Base64(path, rallback) {
			    plus.io.resolveLocalFileSystemURL(path, function(entry) {
			        entry.file(function(e) {
			            let fileReader = new plus.io.FileReader();  
			            fileReader.onload = function(r){
			                rallback(r.target.result)
			            }
			            fileReader.readAsDataURL(e)
			        })
			    })
			},
			getExt(path) {
				let index = path.lastIndexOf('.');
				var ext = path.substr(index + 1);
				return ext;
			},
			selectIdcardFront() {
				let that = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album',], //从相册选择
				    success: function (res) {
						that.image2Base64(res.tempFilePaths[0], r => {
							that.idcard_front = r;
						})
				    }
				});
			},
			selectIdcardBack() {
				let that = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', ''], //从相册选择
				    success: function (res) {
				        that.image2Base64(res.tempFilePaths[0], r => {
				        	that.idcard_back = r;
				        })
				    }
				});
			},
			selectEstate() {
				let that = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', ''], //从相册选择
				    success: function (res) {
				        that.image2Base64(res.tempFilePaths[0], r => {
				        	that.estate = r;
				        })
				    }
				});
			},
			sendCode() {
				if (this.mobile_number == '') {
					return;
				}
				this.$api.postSendCode({
					mobile_number: this.mobile_number,
				}).then(res => {
					if (res.meta.code == '000') {
						uni.showToast({
							title: res.data.meta.msg,
							duration: 2000,
							icon: 'none',
						})
					}
				})
			},
			postSignup() {
				if (this.mobile_number == ''
				|| this.username == ''
				||this.address == ''
				|| this.community_id == ''
				|| this.code == ''
				|| this.idcard_front == ''
				|| this.thisidcard_back == ''
				|| this.estate == ''
				) {
					return;
				}
				let that = this;
				this.$api.postSignup({
					username: this.username,
					community_id: this.community_id,
					address: this.address,
					idcard_front: this.idcard_front,
					idcard_back: this.idcard_back,
					estate: this.estate,
					mobile_number: this.mobile_number,
					code: this.code,
				}).then(res => {
					// todo
					if (res.meta.code == '000') {
						uni.redirectTo({
							url: '/pages/user/wait'
						});
					}
				}).catch(e => {
					
				})
			}
		}
	}
</script>

<style>
	
	.txt {
		display: inline-block;
		position: relative;
		font-size: 14px;
		padding: 0 20px;
		color: gray;
	}
	.txt:nth-child(2) {
		padding-right: 0;
	}
	
	.txt:nth-child(1)::after {
		content: "";
		width: 1px;
		height: 80%;
		position: absolute;
		top: 10%;
		right: 0;
		background: gray;
	}
</style>
